<template>
  <div>
    <TopFilter :list="topFilterList" :cols="4" :rows="2" :isMemoryPagination="true" :collapse="false" @filterChange="handleFilterChange" />
    <FilterTable
      :columns="tableColumns1"
      columnsRef="partPartPurchasePurchasePlaneBatchPartSelect"
      height="auto"
      :fetchapi="fetchapi"
      :params="fetchParams"
      :onColumnsChange="columns => (this.columns = columns)"
      :onRowSelectChange="handleTableSelect"
    >
      <template slot="controls">
        <el-button size="small" type="primary" @click="hadnleHighStock">按高储生成</el-button>
        <el-button size="small" type="primary" @click="handleLowStock">按低储生成</el-button>
      </template>
    </FilterTable>
    <!-- 类型选择 -->
    <el-radio-group v-model="yearFilterType" style="margin: 10px 0;">
      <el-radio label="1">上年同期比</el-radio>
      <el-radio label="2">本年各期比</el-radio>
    </el-radio-group>
    <!-- 月份统计 -->
    <el-table ref="monthTable" :data="tableMockData" border stripe size="mini" :header-cell-style="{ background: 'rgb(242, 242, 242)' }">
      <el-table-column v-for="col in tableColumns2" :key="col.prop" :prop="col.prop" :label="col.label"></el-table-column>
    </el-table>

    <div class="btnWrap">
      <el-button @click="handleCancle">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </div>
  </div>
</template>

<script>
import { queryBatchOrderPartList } from '@/api/part/partPurchase/purchaseOrder';

import { dictionary } from '@/utils/dictMixin';

export default {
  mixins: [dictionary],
  data() {
    return {
      topFilterList: this.createTopFilter(),
      tableColumns1: this.cteateTableColums1(),
      tableColumns2: this.cteateTableColums2(),
      fetchapi: queryBatchOrderPartList,
      fetchParams: { xhrAbort: false },
      yearFilterType: '1', // 下方筛选条件
      selectedTableData: [],
      tableMockData: []
    };
  },
  mounted() {
    let mockObj = {};
    for (let i = 0; i < 12; i++) {
      mockObj[i + 1] = i + 1;
    }
    this.tableMockData.push(mockObj);

    this.$nextTick(() => {
      this.$refs.monthTable.doLayout();
    });
  },
  methods: {
    createTopFilter() {
      return [
        {
          type: 'INPUT',
          fieldName: 'mainGroupNo',
          label: '主组号'
        },
        {
          type: 'INPUT',
          fieldName: 'partNo',
          label: '配件代码'
        },
        {
          type: 'CHECKBOX',
          fieldName: 'zeroStock',
          label: '零库存',
          options: {
            trueValue: 1,
            falseValue: ''
          }
        }
      ];
    },
    cteateTableColums1() {
      return [
        {
          title: '配件代码',
          dataIndex: 'partNo'
        },
        {
          title: '配件名称',
          dataIndex: 'partName'
        },
        {
          title: '采购单价',
          dataIndex: 'planPrice'
        },
        {
          title: '计划数量',
          dataIndex: 'nOrderQty',
          editable: true,
          defaultEditable: true,
          editType: 'number',
          min: 0,
          editDisableRender: params => {
            return <el-input value={params.row.nOrderQty}></el-input>;
          }
        },
        {
          title: '库存数量',
          dataIndex: 'stockQuantity'
        },
        {
          title: '可用数量',
          dataIndex: 'useableQuantity'
        },
        {
          title: '储备高限',
          dataIndex: 'maxStock'
        },
        {
          title: '储备低限',
          dataIndex: 'minStock'
        },
        {
          title: 'R3仓库',
          dataIndex: 'mock8'
        },
        {
          title: 'R3库存数量',
          dataIndex: 'mock9'
        },
        // {
        //   title: '厂家配件代码',
        //   dataIndex: 'partNo'
        // },
        // {
        //   title: '在途数量',
        //   dataIndex: 'nOrderQty'
        // },
        {
          title: '包装数量',
          dataIndex: 'packageLiaght'
        },
        {
          title: '借入数量',
          dataIndex: 'borrowQuantity'
        },
        {
          title: '入库数量',
          dataIndex: 'inQuantity'
        },
        {
          title: '出库数量',
          dataIndex: 'outQuantity'
        },
        {
          title: '销售单价',
          dataIndex: 'costSalesPrice'
        },
        {
          title: '计量单位',
          dataIndex: 'unitName'
        },
        {
          title: '配件分类代码',
          dataIndex: 'partSortCode',
          render: params => {
            return <span>{this.createDictText(params.row.partSortCode, 8106)}</span>;
          }
        },
        {
          title: '车型',
          dataIndex: 'model'
        },
        {
          title: '主组号',
          dataIndex: 'mainGroupNo'
        },
        {
          title: 'ABC标识',
          dataIndex: 'abcType',
          render: params => {
            return <span>{this.createDictText(params.row.abcType, 8902)}</span>;
          }
        },
        {
          title: '最后出库日期',
          dataIndex: 'lastStockOut',
          dateFormat: 'yyyy-MM-dd'
        },
        {
          title: '仅辖区发货',
          dataIndex: 'shipMark'
        }
      ];
    },
    cteateTableColums2() {
      return [
        {
          label: '一月',
          prop: '1'
        },
        {
          label: '二月',
          prop: '2'
        },
        {
          label: '三月',
          prop: '3'
        },
        {
          label: '四月',
          prop: '4'
        },
        {
          label: '五月',
          prop: '5'
        },
        {
          label: '六月',
          prop: '6'
        },
        {
          label: '七月',
          prop: '7'
        },
        {
          label: '八月',
          prop: '8'
        },
        {
          label: '九月',
          prop: '9'
        },
        {
          label: '十月',
          prop: '10'
        },
        {
          label: '十一月',
          prop: '11'
        },
        {
          label: '十二月',
          prop: '12'
        }
      ];
    },
    // 列表行项选择变化
    handleTableSelect(e) {
      this.selectedTableData = e;
    },
    // 搜索条件变化
    handleFilterChange(e) {
      this.fetchParams.xhrAbort = true;
      this.fetchParams = Object.assign(this.fetchParams, {
        ...e,
        xhrAbort: false,
        maxStock: '',
        minStock: ''
      });
    },
    // 点击按高储生成
    hadnleHighStock() {
      this.fetchParams.xhrAbort = true;
      this.fetchParams = Object.assign(this.fetchParams, {
        xhrAbort: false,
        maxStock: 1,
        minStock: ''
      });
    },
    // 点击按低储生成
    handleLowStock() {
      this.fetchParams.xhrAbort = true;
      this.fetchParams = Object.assign(this.fetchParams, {
        xhrAbort: false,
        maxStock: '',
        minStock: 1
      });
    },
    handleConfirm() {
      this.$emit('onConfirm', this.selectedTableData);
      this.handleCancle();
    },
    handleCancle() {
      this.$emit('close');
    }
  }
};
</script>

<style scoped>
.btnWrap {
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 9;
  border-top: 1px solid rgb(233, 233, 233);
  padding: 10px 20px;
  background: rgb(255, 255, 255);
  text-align: right;
}
</style>
